import { Component } from 'react';
import {
  Row,
  Form,
  FormInstance,
  Input,
  Button,
  Checkbox,
  message,
} from 'antd';
import styles from './index.less';
import { history } from '@/.umi/core/history';
import CustomInputNumber from '@/components/custom_input_number';
import SendSmsButton from '@/components/send_sms_btn';
import { observer } from 'mobx-react';
import { userStore } from '@/stores/user';
import AgreeModal from './components/agree_modal';
import { RuleUtils } from 'xo-web-base';

@observer
export default class Register extends Component {
  state = { checked: false };
  form: FormInstance<any> | null = null;
  onFinish = async (values: any) => {
    const { account, password } = values;
    const result = await userStore.register(account, password);
    if (result) {
      message.success('注册成功');
      history.push({
        pathname: './login',
        state: { account: account, password: password },
      });
    }
  };

  goLoginPage = () => {
    history.push('./login');
  };

  /**
   * 复选框选中状态
   * @returns
   */
  changeChecked = (e) => {
    this.setState({ checked: e.target.checked });
  };

  render() {
    const { loading } = userStore;
    return (
      <div>
        <Row justify="space-between">
          <Row className={styles.title_wrap}>
            <div className={styles.title}>注册</div>
            <div className={styles.border}></div>
          </Row>
          <div onClick={this.goLoginPage} className={styles.right_wrap}>
            有账号去登录
          </div>
        </Row>
        <Form
          ref={(e) => {
            this.form = e;
          }}
          name="normal_login"
          className={styles.login_form}
          initialValues={{ remember: true }}
          onFinish={this.onFinish}
        >
          <Form.Item name="account" rules={RuleUtils.mobileRules}>
            <Input placeholder="请输入账号" maxLength={11} />
          </Form.Item>

          <Form.Item name="password" rules={RuleUtils.pwdRules}>
            <Input.Password placeholder="请输入密码" maxLength={16} />
          </Form.Item>
          <Form.Item name="require_password" rules={RuleUtils.pwdConfirmRules}>
            <Input.Password placeholder="请再次输入密码" maxLength={16} />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              loading={loading}
              className={styles.register_form_button}
            >
              注册
            </Button>
          </Form.Item>

        </Form>
      </div>
    );
  }
}
